<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>jdMenu 1.3.beta2</title>
		<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
		<script src="jquery.bgiframe.js" type="text/javascript"></script>
		<script src="jquery.dimensions.js" type="text/javascript"></script>
		<script src="jquery.jdMenu.js" type="text/javascript"></script>
		<script type="text/javascript">
			// Initialization, you can leave this here or move this somewhere else
			$(function(){
				$('ul.jd_menu').jdMenu({	onShow: loadMenu
											//onHideCheck: onHideCheckMenu,
											//onHide: onHideMenu, 
											//onClick: onClickMenu, 
											//onAnimate: onAnimate
											});
				$('ul.jd_menu_vertical').jdMenu({onShow: loadMenu, onHide: unloadMenu, offset: 1, onAnimate: onAnimate});
			});

			function onAnimate(show) {
				//$(this).fadeIn('slow').show();
				if (show) {
					$(this)
						.css('visibility', 'hidden').show()
							.css('width', $(this).innerWidth())
						.hide().css('visibility', 'visible')
					.fadeIn('normal');
				} else {
					$(this).fadeOut('fast');
				}
			}

			var MENU_COUNTER = 1;
			function loadMenu() {
				if (this.id == 'dynamicMenu') {
					$('> ul > li', this).remove();
			
					var ul = $('<ul></ul>');
					var t = MENU_COUNTER + 10;
					for (; MENU_COUNTER < t; MENU_COUNTER++) {
						$('> ul', this).append('<li>Item ' + MENU_COUNTER + '</li>');
					}
				}
			}

			function unloadMenu() {
				if (MENU_COUNTER >= 30) {
					MENU_COUNTER = 1;
				}
			}

			// We're passed a UL
			function onHideCheckMenu() {
				return !$(this).parent().is('.LOCKED');
			}

			// We're passed a LI
			function onClickMenu() {
				$(this).toggleClass('LOCKED');
				return true;
			}
		</script>
		<link rel="stylesheet" href="jdMenu.css" type="text/css" />
		<link rel="stylesheet" href="jdMenu.slate.css" type="text/css" />
		<style type="text/css">
			body {
				margin: 0px;
				padding: 25px;
				font-family: sans-serif;
				font-size: small;
			}
			h1 {
				font-family: sans-serif;
				color: #0068B8;
			}
			
			li.LOCKED {
				font-weight: bold;
			}
			body {
				margin: 0px;
				margin-left: 15px;
			}
		</style>
	</head>
<body>
	<h1>jdMenu 1.3.beta2</h1>
	A normal positioned menu
	<ul class="jd_menu jd_menu_slate">
		<li id="dynamicMenu">Dynamic Menu
			<ul><li>Loading...</li></ul>
		</li>

		<li><a href="http://jquery.com" class="accessible">jQuery</a>
			<ul>
				<li><a href="http://jquery.com" target="_blank">jQuery.com</a></li>
				<li><a href="http://docs.jquery.com">jQuery Docs</a></li>
				<li><a href="http://jquery.com/plugins/">jQuery Plugins</a></li>
				<li><a href="http://www.visualjquery.com">Visual Jquery</a></li>
			</ul>
		</li>
		<li><a href="http://jdsharp.us" class="accessible">jd Sharp</a>
			<ul style="width: 400px;">
				<li>AutoScroll Plugin for jQuery</li>
				<li><a href="#">jdMenu Plugin for jQuery</a></li>
				<li><div style="width: 200px;">Sub sub</div>
					<ul>
						<li>Item 1</li>
						<li>Item 2</li>
						<li>Item 3
							<ul style="width: 600px;">
								<li>Item One</li>
								<li>Item Two</li>
								<li>Item Three</li>
							</ul>
							</li>
					</ul>
				</li>
				<li id="s4">Another List Item</li>
			</ul>
		</li>
	</ul>
	<div id="content">
		<select style="width: 80%;"><option>A really long select box to test IE's "Feature"</option></select>
		<p>
		Lorem ipsum dolor sit amet, con sectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat 
		volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation. ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
		Duis autem vel eum iriure dolor in foo.
		</p>

		<p>
		An absolutely positioned menu
		</p>
			<ul class="jd_menu jd_menu_slate" style="position: absolute; left: 100px; top: 250px; width: 400px;">
				<li>Item One &raquo;
					<ul>
						<li>Item One &raquo; 
						<ul>
							<li>Item One &raquo; 
							<ul>
								<li>Item One</li>
								<li>Item Two</li>
								<li>Item Three</li>
								<li>Item Four</li>
								<li>Item Five</li>
							</ul>
							</li>
							<li>Item Two</li>
							<li>Item Three</li>
							<li>Item Four</li>
							<li>Item Five</li>
						</ul>
						</li>
						<li>Item Two</li>
						<li>Item Three</li>
						<li>Item Four</li>
						<li>Item Five</li>
					</ul>
				</li>
				<li>Item Two &raquo;
					<ul>
						<li>Item One</li>
						<li>Item Two</li>
						<li>Item Three</li>
						<li>Item Four</li>
						<li>Item Five</li>
					</ul>
				</li>
				<li>Item Three &raquo;
					<ul>
						<li>Item One</li>
						<li>Item Two</li>
						<li>Item Three</li>
						<li>Item Four</li>
						<li>Item Five</li>
					</ul>
				</li>
			</ul>

		<div style="height: 200px;">&nbsp;</div>
		<p>A vertical menu</p>
		<ul class="jd_menu_vertical jd_menu_slate">
			<li id="dynamicMenu">Dynamic Menu
				<ul></ul>
			</li>

			<li>jQuery
				<ul>
					<li><a href="http://jquery.com" target="_blank">jQuery.com</a></li>
					<li><a href="http://docs.jquery.com">jQuery Docs</a></li>
					<li><a href="http://jquery.com/plugins/">jQuery Plugins</a></li>
					<li><a href="http://www.visualjquery.com">Visual Jquery</a></li>
				</ul>
			</li>
			<li>jd Sharp
				<ul style="width: 400px;">
					<li>AutoScroll Plugin for jQuery</li>
					<li>jdMenu Plugin for jQuery</li>
					<li>Sub sub
						<ul>
							<li>Item 1</li>
							<li>Item 2</li>
							<li>Item 3</li>
							<li>Item 4</li>
							<li>Item 5</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
		
		<div style="width: 2000px; height: 800px; background-color: #EFEFEF; border: 1px solid #404040;">
			This div to provide content so you can scroll and test menu positioning
		</div>
	</div>
</body>
</html>
